
<template>
  <el-dialog
    title="修改我的信息"
    v-dialog-drag
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    @close="$router.go(-1)"
  >
    <div style="position: relative">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="基本信息" name="baseForm">
          <el-form
            size="small"
            :model="baseForm"
            label-position="left"
            label-width="120px"
            ref="baseForm"
            :rules="baseRules"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item prop="storeId" label="所属门店">
                  {{stores.filter(item=>item.id == baseForm.storeId)[0].name}}
                </el-form-item>
                <el-form-item prop="type" label="客户类型">
                 {{baseForm.type}}
                </el-form-item>
                <el-form-item prop="type" label="客户号">
                 {{baseForm.customerNum}}
                </el-form-item>
                <el-form-item prop="account" label="登录账号">
                  <el-input v-model="baseForm.account" placeholder="6-18位数字"></el-input>
                </el-form-item>
                <el-form-item prop="phoneNum" label="联系电话">
                  <el-input v-model="baseForm.phoneNum" ></el-input>
                </el-form-item>
                <el-form-item prop="safeEmail" label="安全邮箱">
                  <el-input v-model="baseForm.safeEmail" ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="chineseName" label="中文名称">
                  <el-input v-model="baseForm.chineseName"></el-input>
                </el-form-item>
                <el-form-item prop="englishName" label="英文名">
                  <el-input v-model="baseForm.englishName"></el-input>
                </el-form-item>
                <el-form-item prop="englishFamilyName" label="英文姓">
                  <el-input v-model="baseForm.englishFamilyName"></el-input>
                </el-form-item>
                <el-form-item prop="gender" label="性别">
                  <el-select
                    filterable
                    style="width: 100%"
                    v-model="baseForm.gender"
                    placeholder="请选择"
                  >
                    <el-option label="先生" value="先生"></el-option>
                    <el-option label="女士" value="女士"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="" label="零钱与积分">
                  <div v-if="title == '修改'">零钱 ({{baseForm.balance || 0}}) <span style="margin-left:10px">积分 ({{baseForm.integral || 0}})</span></div>
                </el-form-item>
                <el-form-item prop="serviceDiscount" label="是否免费服务">
                  {{baseForm.serviceDiscount?"是":"否"}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item prop="logisticsNotice" label="物流跟踪提醒">
              <el-select
                filterable
                style="width: 100%"
                multiple
                v-model="baseForm.logisticsNotice"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in baseFormOptions.logisticsNotice"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="更多信息" name="detailForm">
          <el-form
            size="small"
            :model="detailForm"
            label-position="left"
            label-width="120px"
            ref="detailForm"
            :rules="detailRules"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item prop="countryName" label="国家名称">
                  <el-select
                    @change="handleCountryChange"
                    filterable
                    style="width: 100%"
                    v-model="detailForm.countryName"
                    placeholder="请选择国家名称"
                  >
                    <el-option
                      v-for="item in detailOptions.countryName"
                      :key="item"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="provinceName" label="省份名称">
                  <el-select
                    filterable
                    @change="handleProvinceChange"
                    style="width: 100%"
                    v-model="detailForm.provinceName"
                    placeholder="请选择省份名称"
                  >
                    <el-option
                      v-for="item in detailOptions.provinceName"
                      :key="item"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="cityName" label="城市名称">
                  <el-select
                    filterable
                    style="width: 100%"
                    v-model="detailForm.cityName"
                    placeholder="请选择城市名称"
                  >
                    <el-option
                      v-for="item in detailOptions.cityName"
                      :key="item"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item prop="countyName" label="区县名称">
                  <el-input v-model="detailForm.countyName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="streetName" label="街道名称">
                  <el-input v-model="detailForm.streetName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="postalCode" label="邮政编码">
                  <el-input v-model="detailForm.postalCode"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="address" label="详细地址">
                  <el-input v-model="detailForm.address"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item prop="idCardNum" label="身份证编号">
                  <el-input v-model="detailForm.idCardNum"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item prop="note" label="备注信息">
                  <el-input
                    placeholder="备注"
                    v-model="detailForm.note"
                    type="textarea"
                    :autosize="{ minRows: 3 }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div style="position: absolute; top: 5px; right: 0">
        <el-button
          type="primary"
          style="margin-left: 10px"
          @click="submit"
          v-repeatClick
        ><i class="fa fa-floppy-o" style="margin-right: 10px"></i
        >保存</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
let search = {

  //账号或者客户号
  accountOrCustomerNo:'',
  //姓名,电话,微信,服务专员QQ
  customSearchString:'',
  //是否启用
  Enabled: "",
  //时间范围
  date:[]
};

//客户基本信息表单
let baseForm = {
  //客户登录账号
  account:'',
  //中文名
  chineseName:'',
  //零钱
  balance:0,
  //积分
  integral:0,
  //客户类型
  type:'注册客户',
  //英文名
  englishName:'',
  //微信账号
  wechatAccount:'',
  //所属客户
  storeId:'',
  //英文姓
  englishFamilyName:'',
  //性别
  gender:'',
  //客户号
  customerNum:'',
  //透支额度
  overdraft:'0.00',
  //运费折扣
  freightDiscount:100,
  //是否免费服务
  serviceDiscount:false,
  //是否信用客户
  creditUser:false,
  //物流信息提醒
  logisticsNotice:['客户手机','客户微信','客户邮件','收货人手机','收货人微信'],
  //联系电话
  phoneNum:'',
  //安全邮箱
  safeEmail:'',
  //服务专员QQ
  serviceQQ:'',
  //是否启用
  enabled: true,
};
//客户详细信息表单
let detailForm = {
  //国家名称
  countryName: "",
  //省份
  provinceName: "",
  //城市名称
  cityName: "",
  //县
  countyName: "",
  //街道
  streetName: "",
  //邮政编码
  postalCode: "",
  //详细地址
  address: "",
  //身份证编号
  idCardNum: "",
  //备注信息
  note: "",
};

import myHeader from "@/components/pageHEader/pageHeader";
import { dateFormat } from "@/utils";
import { mapGetters } from "vuex";
import {
  getCustomer,
  addCustomer,
  getCustomerNum,
  delCustomer,
  modCustomer,
  disableOrEnableCustomer,
  getCustomerInfo
} from "@/api/consumers/customer";

import { getProvinces, getCities, getCoungries } from "@/api/common";
export default {
  name: "customer",
  components: {
    myHeader,
  },
  props:['show'],
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      treeData: [],
      //搜索
      search: this.cloneObj(search),
      //选中国家
      selectCountry: "",
      activeName: "baseForm",
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm: this.cloneObj(baseForm),
      detailForm: this.cloneObj(detailForm),
      baseRules: {
        //客户登录账号
        account:[this.$RegExp.required()],
        //中文名
        chineseName:[this.$RegExp.required()],
        //门店Id
        storeId:[this.$RegExp.required('选择不能为空')],
        type:[this.$RegExp.required('选择不能为空')],
        customerNum:[
          { type: 'number', message: '客户号必须为数字' }
        ]
      },
      detailRules: {

      },
      baseFormOptions:{
        type:[
          {
            label:'散客',
            value:'散客'
          },{
            label:'注册客户',
            value:'注册客户'
          },{
            label:'VIP客户',
            value:'VIP客户'
          }
        ],
        logisticsNotice:[
          {
            label:'客户手机',
            value:'客户手机'
          },{
            label:'客户微信',
            value:'客户微信'
          },{
            label:'客户邮件',
            value:'客户邮件'
          },{
            label:'收货人手机',
            value:'收货人手机'
          },{
            label:'收货人微信',
            value:'收货人微信'
          },
        ]
      },
      detailOptions: {
        countryName: [],
        provinceName: [],
        cityName: [],
        countyName: [],
        streetName: [],
      },
      //查看客户
      dialogViewVisible: false,
    };
  },
  computed: {
    ...mapGetters(["stores"]),
  },
  mounted() {
    //获取所有国家
    getCoungries().then((resp) => {
      this.detailOptions.countryName = resp.data;
    });
    let customerNum = this.$route.query.customerNum
    if(customerNum){
      this.handleAddUpdate('mod',customerNum)
    }
  },
  methods: {

    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
        if (this.$refs.detailForm) this.$refs.detailForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row,id) {
      this.activeName = "baseForm";
      //修改处理
      if (row) {
        this.title = "修改";
        if(id){
          getCustomerInfo(id).then((resp) => {
            let row = resp.data
            //将数据复制给form
            this.handleModform(row, this.baseForm);
            this.baseForm.customerNum = parseInt(this.baseForm.customerNum)
            this.handleModform(row, this.detailForm);
            if(row.countryName)
              this.getProvinces();
            if(row.provinceName)
              this.getCities();
            this.baseForm.id = row.id;
            this.dialogFormVisible = true;
          });
        }else{
          //将数据复制给form
          this.handleModform(row, this.baseForm);
          this.baseForm.customerNum = parseInt(this.baseForm.customerNum)
          this.handleModform(row, this.detailForm);
          if(row.countryName)
            this.getProvinces();
          if(row.provinceName)
            this.getCities();
          this.baseForm.id = row.id;
          this.dialogFormVisible = true;
        }

      } else {
        getCustomerNum().then(resp=>{ //获取新增时的客户编号
          this.detailOptions.provinceName = [];
          this.detailOptions.cityName = [];
          this.baseForm = this.cloneObj(baseForm);
          this.detailForm = this.cloneObj(detailForm);
          this.baseForm.customerNum = resp.data
          this.title = "添加";
          this.dialogFormVisible = true;
        })
      }
    },
    getCustomer() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        enabled: this.search.Enabled,
        accountOrCustomerNo:this.search.accountOrCustomerNo,
        customSearchString:this.search.customSearchString,
        startDate: this.search.date[0]?this.search.date[0]+' 00:00:00':'',
        endDate: this.search.date[1]?this.search.date[1]+' 23:59:59':'',
      };
      getCustomer(query).then((resp) => {
        this.data =  resp.data.records
        this.total = resp.data.total;
      });
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取省份
    getProvinces() {
      getProvinces(this.detailForm.countryName).then((resp) => {
        this.detailOptions.provinceName = resp.data;
      });
    },
    //获取市
    getCities() {
      getCities(this.detailForm.provinceName).then((resp) => {
        this.detailOptions.cityName = resp.data;
      });
    },
    //select改变
    handleCountryChange() {
      this.detailOptions.provinceName = [];
      this.detailForm.provinceName = "";
      this.getProvinces();
    },
    handleProvinceChange() {
      this.detailOptions.cityName = [];
      this.detailForm.cityName = "";
      this.getCities();
    },
    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          this.$refs["detailForm"].validate((valid) => {
            if (valid) {
              let submit = Object.assign(
                this.baseForm,
                this.detailForm
              );
              let request;
              if (this.title == "添加") {
                request = addCustomer(submit);
              } else {
                request = modCustomer(submit);
              }
              request.then((resp) => {
                this.$message.success(resp.message || "成功");
                this.dialogFormVisible = false
              });
            } else {
              this.activeName = "detailForm";
            }
          });
        } else {
          this.activeName = "baseForm";
        }
      });
    },
    //查看客户信息
    view() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.dialogViewVisible = true;
    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let ids = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用客户信息, 是否继续?";
      } else {
        tip = "此操作将禁用客户信息, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableCustomer(ids,{enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");

        });
      });
    },
    //删除客户信息
    delCustomer() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delCustomer(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");

          }
        );
      });
    },

  },
};
</script>

<style scoped lang='scss'>
.tdItem {
  line-height: 25px;
}
</style>
